<template>
  <el-drawer
    :title="title"
    :visible.sync="drawer"
    :direction="direction"
    :before-close="handleClose"
    destroy-on-close
    custom-class="drawerClass"
    size="70%"
  >
    <div class="myMerchant" style="padding: 20px">
      <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <i class="el-icon-user"></i>
            <span>名称</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content right">
            <span>一号店</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <i class="iconfont icon-bianma"></i>
            <span> 编码</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content right">
            <span>18100000000</span>
          </div>
        </el-col>
      </el-row>
       <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <i class="iconfont icon-xiaoshou-"></i>
            <span>销售方</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content right">
            <span>北京红太阳</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <i class="iconfont icon-Budget"></i>
            <span> 赊货方</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content right">
            <span>山东高速物资集团</span>
          </div>
        </el-col>
      </el-row>
       <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">
           <i class="el-icon-mobile-phone"></i>
            <span> 联系方式</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content right">
            <span>13847616463</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <i class="el-icon-location-outline"></i>
            <span> 地址</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content right">
            <span>北京市丰台区汉威国际广场三区</span>
          </div>
        </el-col>
      </el-row>
       <el-row>
        <el-col :span="6">
          <div class="grid-content bg-purple">
           <i class="el-icon-mobile-phone"></i>
            <span> 身份证</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content right">
            <span>230498765654565456</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <i class="el-icon-location-outline"></i>
            <span> 营业执照</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content right">
            <img style="width:20px" src="https://gimg2.baidu.com/image_search/src=https%3A%2F%2Fp1-tt.byteimg.com%2Forigin%2Fpgc-image%2F055cd6abf9c747ee914192c3c69ebe8c%3Ffrom%3Dpc&refer=http%3A%2F%2Fp1-tt.byteimg.com&app=2002&size=f10000,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1694670526&t=e93257bb3e8713aa24972bc9a753e81c" alt="">
          </div>
        </el-col>
      </el-row>
      <!-- <el-descriptions
        class="margin-top"
        title=""
        :column="2"
        size="medium"
        border
      >
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            身份证
          </template>
          230498767876545654
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions
        class="image"
        title=""
        :column="2"
        size="medium"
        border
      >
        <el-descriptions-item style="border:2px solid red;">
          <template slot="label">
            <div style="width:274px;">
              <i class="el-icon-user"></i>
               营业执照
            </div>
          </template>
          <img style="width:20%" src="https://gimg2.baidu.com/image_search/src=https%3A%2F%2Fp1-tt.byteimg.com%2Forigin%2Fpgc-image%2F055cd6abf9c747ee914192c3c69ebe8c%3Ffrom%3Dpc&refer=http%3A%2F%2Fp1-tt.byteimg.com&app=2002&size=f10000,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1694670526&t=e93257bb3e8713aa24972bc9a753e81c" alt="">
        </el-descriptions-item>
      </el-descriptions> -->
    </div>

    <div style="height: 50px"></div>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '5px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 99999,
      }"
    >
      <el-button @click="drawer = false">取消</el-button>
    </div>
  </el-drawer>
</template>

<script>
import Upload from "@/components/upload.vue";
const regExp = new RegExp("^1[3456789]\\d{9}$"); // 手机号正则
export default {
  props: {
    parentObj: { type: Object },
  },
  components: {
    Upload,
  },
  data() {
    return {
      // 是否禁止上传
      uploadDisabled: false,
      // 上传路径
      uploadUrl: "https://api.yoojet.com/Base_Manage/Upload/Filleimag",
      // 上传后的图片数据
      uploadFileListDataUrl: [],
      drawer: false,
      direction: "rtl",
      entity: {},
      rules: {
        SupplieId: [
          { required: true, message: "请选择公司", trigger: "change" },
        ],
        UserName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        RealName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        UserPhone: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请输入手机号"));
              } else if (!regExp.test(value)) {
                callback(new Error("请输入正确的手机号"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        newPwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
        Sex: [{ required: true, message: "请选择性别", trigger: "change" }],
      },
      btnLoading: false,
      title: "",
      loading: false,
      timeout: null,
    };
  },
  methods: {
    // 上传是否成功
    uploadSuccessChange(fileList, newFileListData) {
      console.log("上传是否成功", fileList, newFileListData);
    },

    // 内审附件删除
    handleRemoveChange(fileList, newFileListData) {
      console.log("上传删除", fileList, newFileListData);
    },
    init() {
      this.entity = {};
      this.drawer = true;
      // if (this.$refs['form']) {
      //   this.$refs['form'].clearValidate()
      // }
    },

    openForm(Id, CompanyId) {
      this.init();
      this.title = "资质详情";
    },
    handleClose(done) {
      done();
    },
    handleSelect(item) {
      console.log(item);
    },
    getTheData(id) {
      this.$http
        .post("/Base_Manage/Base_User/GetTheData", { id })
        .then((res) => {
          if (res.Success) {
            this.entity = res.Data;
          } else {
            this.$message.error(res.Msg);
          }
        });
    },
    // 保存
    handleSubmit() {
      console.log(this.entity);
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          return;
        }
        this.btnLoading = true;
        this.$message.success("操作成功");
        this.parentObj.getDataList();
        this.drawer = false;

        return;
        this.$http
          .post("/Base_Manage/Base_User/SaveData", this.entity)
          .then((res) => {
            this.btnLoading = false;
            if (res.Success) {
              this.$message.success("操作成功");
              this.parentObj.getDataList();
              this.drawer = false;
            } else {
              this.$message.error(res.Msg);
            }
          });
      });
    },
  },
};
</script>

<style lang="less" scoped>
.drawerClass {
  padding: 10px;
}
/*覆盖el-drawer  头部下边距样式*/
.el-drawer__header {
  margin-bottom: 0 !important;
}
.myMerchant{
  .grid-content{
    border:1px solid #EBEEF5;
    padding:10px;
    span{
      color:#8a8c8f;
    }
  }
  .grid-content.bg-purple{
    background-color: #FAFAFA;
  }
  .grid-content.right{
    border-left:none;
  }


}
</style>
